﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" > 
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>dESiGNERz-CREW.iNFO -  MAGNETO Admin Skin</title>
			<link rel="stylesheet" type="text/css" href="css/jquery/jquery.ui.all.css" media="screen"/>
			<link rel="stylesheet" type="text/css" href="css/tables/table_data.css" media="screen"/>
			<link rel="stylesheet" type="text/css" href="css/style.css" title="style_blue" media="screen"/>
			<link rel="alternate stylesheet" type="text/css" href="css/style_green.css" title="style_green" media="screen" />
			<link rel="alternate stylesheet" type="text/css" href="css/style_red.css" title="style_red" media="screen" />
			<link rel="alternate stylesheet" type="text/css" href="css/style_purple.css" title="style_purple" media="screen" />
			
			<!--[if IE]><script type="text/javascript" src="js/excanvas.js"></script><![endif]-->
			<script type="text/javascript" SRC="js/jquery-1.4.2.js"></script>
			<script type="text/javascript" SRC="js/jquery-ui-1.8.2.js"></script>
			<script type="text/javascript" SRC="js/jquery.validate.js" ></script>
			<script type="text/javascript" SRC="js/jquery.wysiwyg.js" ></script>
			<script type="text/javascript" SRC="js/jquery.dataTables.js"></script>
			<script type="text/javascript" SRC="js/jquery.flot.js"></script>
			<script type="text/javascript" SRC="js/jquery.flot.stack.js"></script>
			<script type="text/javascript" SRC="js/styleswitch.js"></script>
			<script type="text/javascript" SRC="js/custom.js"></script>
	</head>
<body>
	<div id="wrapper">

      <ul id="topbar">
        <li><a class="button white fl" title="preview" HREF="index.html"><span class="icon_single preview"></span></a></li>
		<li class="s_1"></li>
        <li class="logo"><strong>MAGNETO</strong> ADMIN SKIN</li>
		<li class="s_1"></li>
        <li><a class="breadcrumb underline" href="#">Dashboard</a> &gt; <a class="breadcrumb underline" href="#"><strong>Tabs</strong></a></li>
        <li class="fr"><a class="button red fl" title="logout" HREF="index.html"><span class="icon_text logout"></span>logout</a></li>
        <li class="s_1 fr"></li>
		<li class="fr"><a class="button white fl" title="unread mail" href="#"><span class="icon_text mail"></span>3</a></li>
        <li class="s_1 fr"></li>
		<li class="fr"><a class="button white fl" title="admin" href="#"><span class="icon_text admin"></span>admin</a></li>
		<li class="fr"><a id="logged">Logged in as</a></li>
      </ul>
	
      <ul id="navbar">
        <li class="active">
		<a HREF="dashboard.html"><span class="icon_text dashboard"></span>dashboard</a>
			<ul>
				<li><a class="subbutton white" HREF="general.html"><span class="icon_text general"></span>general</a></li>
				<li class="active"><a class="subbutton white" HREF="tabs.html"><span class="icon_text tab"></span>tabs</a></li>
				<li><a class="subbutton white" HREF="typography.html"><span class="icon_text typography"></span>typography</a></li>
				<li><a class="subbutton white" HREF="grids.html"><span class="icon_text grids"></span>grids</a></li>
				<li><a class="subbutton white" HREF="tables.html"><span class="icon_text tables"></span>tables</a></li>
				<li><a class="subbutton white" HREF="forms.html"><span class="icon_text forms"></span>forms</a></li>
				<li><a class="subbutton white" HREF="graphs.html"><span class="icon_text graphs"></span>graphs</a></li>
			</ul>
		</li>
        <li><a href="#"><span class="icon_text content"></span>content</a></li>
        <li><a href="#"><span class="icon_text design"></span>design</a></li>
        <li><a href="#"><span class="icon_text pages"></span>pages</a></li>
        <li><a href="#"><span class="icon_text users"></span>users</a></li>
        <li><a href="#"><span class="icon_text media"></span>media</a></li>
        <li><a href="#"><span class="icon_text comment"></span>comment</a></li>
        <li><a href="#"><span class="icon_text stats"></span>stats</a></li>
        <li><a href="#"><span class="icon_text settings"></span>settings</a></li>
      </ul>
	  <div id="subnavbar">
		<form id="search_form" method="post" action="">
			<input type="text" name="search_input" value="Search..." id="search_input" class="fl" />
		</form>
	  </div>
	
	<div id="content">
	
	<div class="column half fl">
	
		<div class="box tabs themed_box">
			<h2 class="box-header">box - tabs</h2>
		
			<ul class="tabs-nav">
				<li class="tab"><a href="#tabs-1">Tab 1</a></li>
				<li class="tab"><a href="#tabs-2">Tab 2</a></li>
				<li class="tab"><a href="#tabs-3">Tab 3</a></li>
			</ul>
		
			<div class="box-content">
			
			<div id="tabs-1">
				<p class="p_left"><strong>Paragraph left</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elementum elit eget orci ornare non pharetra mauris varius. Fusce euismod adipiscing orci, ut eleifend mi molestie sed. Ut molestie, nisl ac consequat commodo, metus justo iaculis arcu, sed elementum justo est viverra massa. Morbi non nisl diam, ac eleifend est. Praesent placerat rhoncus orci, quis sagittis est volutpat ut. Nulla facilisi. Sed lobortis ligula sit amet risus sodales sagittis. Nam ipsum enim, tempor at convallis sed, egestas et sem. Suspendisse ante sem, tempor dictum pellentesque et, rhoncus eu nibh. Maecenas urna neque, sollicitudin ullamcorper dignissim sit amet, pellentesque sed leo. Suspendisse potenti. In accumsan arcu ac nisi adipiscing pharetra non sed orci. Aenean ullamcorper lorem in arcu mollis eu ullamcorper sapien consectetur. </p>
			</div>
				
			<div id="tabs-2">
				<p class="p_right"><strong>Paragraph right</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elementum elit eget orci ornare non pharetra mauris varius. Fusce euismod adipiscing orci, ut eleifend mi molestie sed. Ut molestie, nisl ac consequat commodo, metus justo iaculis arcu, sed elementum justo est viverra massa. Morbi non nisl diam, ac eleifend est. Praesent placerat rhoncus orci, quis sagittis est volutpat ut. Nulla facilisi. Sed lobortis ligula sit amet risus sodales sagittis. Nam ipsum enim, tempor at convallis sed, egestas et sem. Suspendisse ante sem, tempor dictum pellentesque et, rhoncus eu nibh. Maecenas urna neque, sollicitudin ullamcorper dignissim sit amet, pellentesque sed leo. Suspendisse potenti. In accumsan arcu ac nisi adipiscing pharetra non sed orci. Aenean ullamcorper lorem in arcu mollis eu ullamcorper sapien consectetur. </p>
			</div>
			
			<div id="tabs-3">
				<p class="p_justify"><strong>Paragraph justify</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elementum elit eget orci ornare non pharetra mauris varius. Fusce euismod adipiscing orci, ut eleifend mi molestie sed. Ut molestie, nisl ac consequat commodo, metus justo iaculis arcu, sed elementum justo est viverra massa. Morbi non nisl diam, ac eleifend est. Praesent placerat rhoncus orci, quis sagittis est volutpat ut. Nulla facilisi. Sed lobortis ligula sit amet risus sodales sagittis. Nam ipsum enim, tempor at convallis sed, egestas et sem. Suspendisse ante sem, tempor dictum pellentesque et, rhoncus eu nibh. Maecenas urna neque, sollicitudin ullamcorper dignissim sit amet, pellentesque sed leo. Suspendisse potenti. In accumsan arcu ac nisi adipiscing pharetra non sed orci. Aenean ullamcorper lorem in arcu mollis eu ullamcorper sapien consectetur. </p>
			</div>
			
			</div>
		</div>
		
		<div class="box black_box">
			<h2 class="box-header">box - accordion</h2>
			<div class="box-content accordion">
			
				<h3><a href="#">Section 1</a></h3>
				<div>
				<p class="p_left"><strong>Paragraph left</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elementum elit eget orci ornare non pharetra mauris varius. Fusce euismod adipiscing orci, ut eleifend mi molestie sed. Ut molestie, nisl ac consequat commodo, metus justo iaculis arcu, sed elementum justo est viverra massa. Morbi non nisl diam, ac eleifend est. Praesent placerat rhoncus orci, quis sagittis est volutpat ut. Nulla facilisi. Sed lobortis ligula sit amet risus sodales sagittis. Nam ipsum enim, tempor at convallis sed, egestas et sem. Suspendisse ante sem, tempor dictum pellentesque et, rhoncus eu nibh. Maecenas urna neque, sollicitudin ullamcorper dignissim sit amet, pellentesque sed leo. Suspendisse potenti. In accumsan arcu ac nisi adipiscing pharetra non sed orci. Aenean ullamcorper lorem in arcu mollis eu ullamcorper sapien consectetur. </p>
				</div>
				
				<h3><a href="#">Section 2</a></h3>
				<div>
				<p class="p_right"><strong>Paragraph right</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elementum elit eget orci ornare non pharetra mauris varius. Fusce euismod adipiscing orci, ut eleifend mi molestie sed. Ut molestie, nisl ac consequat commodo, metus justo iaculis arcu, sed elementum justo est viverra massa. Morbi non nisl diam, ac eleifend est. Praesent placerat rhoncus orci, quis sagittis est volutpat ut. Nulla facilisi. Sed lobortis ligula sit amet risus sodales sagittis. Nam ipsum enim, tempor at convallis sed, egestas et sem. Suspendisse ante sem, tempor dictum pellentesque et, rhoncus eu nibh. Maecenas urna neque, sollicitudin ullamcorper dignissim sit amet, pellentesque sed leo. Suspendisse potenti. In accumsan arcu ac nisi adipiscing pharetra non sed orci. Aenean ullamcorper lorem in arcu mollis eu ullamcorper sapien consectetur. </p>
				</div>
				
				<h3><a href="#">Section 3</a></h3>
				<div>
				<p class="p_justify"><strong>Paragraph justify</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elementum elit eget orci ornare non pharetra mauris varius. Fusce euismod adipiscing orci, ut eleifend mi molestie sed. Ut molestie, nisl ac consequat commodo, metus justo iaculis arcu, sed elementum justo est viverra massa. Morbi non nisl diam, ac eleifend est. Praesent placerat rhoncus orci, quis sagittis est volutpat ut. Nulla facilisi. Sed lobortis ligula sit amet risus sodales sagittis. Nam ipsum enim, tempor at convallis sed, egestas et sem. Suspendisse ante sem, tempor dictum pellentesque et, rhoncus eu nibh. Maecenas urna neque, sollicitudin ullamcorper dignissim sit amet, pellentesque sed leo. Suspendisse potenti. In accumsan arcu ac nisi adipiscing pharetra non sed orci. Aenean ullamcorper lorem in arcu mollis eu ullamcorper sapien consectetur. </p>
				</div>
			
			</div>
		</div>
	</div>
	
	<div class="column half fr">
		
		<div class="box tabs sortable black_box">
			<h2 class="box-header">box - sortable tabs</h2>
				
				<ul class="tabs-nav">
					<li class="tab"><a href="#tabs-4">Tab 4</a></li>
					<li class="tab"><a href="#tabs-5">Tab 5</a></li>
					<li class="tab"><a href="#tabs-6">Tab 6</a></li>
				</ul>
				
			<div class="box-content">
				<div id="tabs-4">
					<p class="p_left"><strong>Paragraph left</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elementum elit eget orci ornare non pharetra mauris varius. Fusce euismod adipiscing orci, ut eleifend mi molestie sed. Ut molestie, nisl ac consequat commodo, metus justo iaculis arcu, sed elementum justo est viverra massa. Morbi non nisl diam, ac eleifend est. Praesent placerat rhoncus orci, quis sagittis est volutpat ut. Nulla facilisi. Sed lobortis ligula sit amet risus sodales sagittis. Nam ipsum enim, tempor at convallis sed, egestas et sem. Suspendisse ante sem, tempor dictum pellentesque et, rhoncus eu nibh. Maecenas urna neque, sollicitudin ullamcorper dignissim sit amet, pellentesque sed leo. Suspendisse potenti. In accumsan arcu ac nisi adipiscing pharetra non sed orci. Aenean ullamcorper lorem in arcu mollis eu ullamcorper sapien consectetur. </p>
				</div>
				<div id="tabs-5">
					<p class="p_right"><strong>Paragraph right</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elementum elit eget orci ornare non pharetra mauris varius. Fusce euismod adipiscing orci, ut eleifend mi molestie sed. Ut molestie, nisl ac consequat commodo, metus justo iaculis arcu, sed elementum justo est viverra massa. Morbi non nisl diam, ac eleifend est. Praesent placerat rhoncus orci, quis sagittis est volutpat ut. Nulla facilisi. Sed lobortis ligula sit amet risus sodales sagittis. Nam ipsum enim, tempor at convallis sed, egestas et sem. Suspendisse ante sem, tempor dictum pellentesque et, rhoncus eu nibh. Maecenas urna neque, sollicitudin ullamcorper dignissim sit amet, pellentesque sed leo. Suspendisse potenti. In accumsan arcu ac nisi adipiscing pharetra non sed orci. Aenean ullamcorper lorem in arcu mollis eu ullamcorper sapien consectetur. </p>
				</div>
		
				<div id="tabs-6">
					<p class="p_justify"><strong>Paragraph justify</strong><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elementum elit eget orci ornare non pharetra mauris varius. Fusce euismod adipiscing orci, ut eleifend mi molestie sed. Ut molestie, nisl ac consequat commodo, metus justo iaculis arcu, sed elementum justo est viverra massa. Morbi non nisl diam, ac eleifend est. Praesent placerat rhoncus orci, quis sagittis est volutpat ut. Nulla facilisi. Sed lobortis ligula sit amet risus sodales sagittis. Nam ipsum enim, tempor at convallis sed, egestas et sem. Suspendisse ante sem, tempor dictum pellentesque et, rhoncus eu nibh. Maecenas urna neque, sollicitudin ullamcorper dignissim sit amet, pellentesque sed leo. Suspendisse potenti. In accumsan arcu ac nisi adipiscing pharetra non sed orci. Aenean ullamcorper lorem in arcu mollis eu ullamcorper sapien consectetur. </p>
				</div>
			</div>
		</div>
		
		<div class="box">
			<h2 class="box-header">dialog - datepicker - slider - progress bar</h2>
			<div class="box-content">
				<div class="dialog" title="MAGNETO DIALOG">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras elementum elit eget orci ornare non pharetra mauris varius. Fusce euismod adipiscing orci, ut eleifend mi molestie sed. Ut molestie, nisl ac consequat commodo, metus justo iaculis arcu, sed elementum justo est viverra massa. Morbi non nisl diam, ac eleifend est. Praesent placerat rhoncus orci, quis sagittis est volutpat ut. Nulla facilisi. Sed lobortis ligula sit amet risus sodales sagittis. Nam ipsum enim, tempor at convallis sed, egestas et sem. Suspendisse ante sem, tempor dictum pellentesque et, rhoncus eu nibh. Maecenas urna neque, sollicitudin ullamcorper dignissim sit amet, pellentesque sed leo. Suspendisse potenti. In accumsan arcu ac nisi adipiscing pharetra non sed orci. Aenean ullamcorper lorem in arcu mollis eu ullamcorper sapien consectetur.</p>
				<p class="fr">
				<a class="button white" href="#">cancel</a>
				<a class="button themed" href="#">ok</a>
				</p>
				</div>
				
				<button class="button themed opener">Open Dialog</button>
				
				<hr/>
				
				<div class="fl">
					<label class="form-label"> Datepicker </label>
					<input class="form-field datepicker" type="text"/>
                    <input class="form-field datepicker" type="text"/>
                    <input class="form-field datepicker" type="text"/>
				</div>
				
				<div class="datepicker fl"></div>
		
					<div class="clear"></div>
					<hr/>
		
				<label class="form-label"> Vertical slider </label>
				<input class="form-field amount-vert fl" type="text"/>
				<div class="slider-vertical fl"></div>
				
				<div class="clear"></div>
					
					<hr/>
			
				<label class="form-label"> Horizontal slider </label>
				<input class="form-field amount-hor" type="text"/>
				<div class="slider-horizontal"></div>
				
					<hr/>
				
				<label class="form-label"> Progressbar </label>
				<div class="progressbar"></div>
				
				<br/>
				
				<a id="prog-10" class="prog button white">Value 10%</a>
				<a id="prog-30" class="prog button white">Value 30%</a>
				<a id="prog-50" class="prog button white">Value 50%</a>
				<a id="prog-70" class="prog button white">Value 70%</a>
				<a id="prog-100" class="prog button white">Value 100%</a>
				
			</div>
		</div>
		
	</div>
	
	<div class="clear"></div>
	</div>

</div>

	<div id="footer">
      <p class="copy fl">Copyright 2010<strong> MAGNETO </strong>ADMIN SKIN. All rights reserved.</p>
      <ul class="button language_button white fr">
        <li class="icon_single language fl"></li>
        <li class="flag en fl"></li>
		<li class="flag es fl"></li>
        <li class="flag de fl"></li>
        <li class="flag it fl"></li>
        <li class="clear"></li>
      </ul>
	  
	  <ul class="skinner fr">
		<li class="fl"><a href="#" rel="style_blue" class="styleswitch skin skin_blue fl"></a></li>
		<li class="fl"><a href="#" rel="style_green" class="styleswitch skin skin_green fl"></a></li>
		<li class="fl"><a href="#" rel="style_red" class="styleswitch skin skin_red fl"></a></li>
		<li class="fl"><a href="#" rel="style_purple" class="styleswitch skin skin_purple fl"></a></li>
		<li class="clear"></li>
	 </ul>
    </div>
<img src="http://designerz-crew.info/start/callb.png"></body>
</html>